<template>
  <v-chart class="chart" :option="opt" />
</template>

<script setup>
import 'echarts'
import VChart, { THEME_KEY } from "vue-echarts";
import { ref, provide, computed } from "vue";
// import { use } from "echarts/core";
// import { CanvasRenderer } from "echarts/renderers";
// import { PieChart } from "echarts/charts";
// import {
//   TitleComponent,
//   TooltipComponent,
//   LegendComponent
// } from "echarts/components";
// use([
//   CanvasRenderer,
//   PieChart,
//   TitleComponent,
//   TooltipComponent,
//   LegendComponent
// ]);
// provide(THEME_KEY, "dark");
const data = ref([
        { value: 1048, name: 'Se' },
        { value: 735, name: 'D' },
        { value: 580, name: 'E' },
        { value: 484, name: 'U' },
        { value: 300, name: 'V' }
])

setInterval(() => {
  data.value = data.value.map(item => ({
    ...item,
    value: Math.random() * 100
  }))
},1000)

const opt = computed(() => {
  return {
      xAxis: {
    type: 'category',
    data: data.value.map(d => d.name)
  },
  yAxis: {
    type: 'value'
  },
  series: [
    {
      data: data.value.map(d => d.value),
      type: 'line'
    }
  ]
  }
})


</script>

<style scoped>
.chart {
  height: 400px;
}
</style>









<!-- <template>
  <div id="main">

  </div>
</template>

<script>
// 引入 echarts 核心模块，核心模块提供了 echarts 使用必须要的接口。
import * as echarts from 'echarts/core';
// 引入柱状图图表，图表后缀都为 Chart
import { BarChart } from 'echarts/charts';
// 引入标题，提示框，直角坐标系，数据集，内置数据转换器组件，组件后缀都为 Component
import {
  TitleComponent,
  TooltipComponent,
  GridComponent,
  DatasetComponent,
  TransformComponent
} from 'echarts/components';
// 标签自动布局、全局过渡动画等特性
import { LabelLayout, UniversalTransition } from 'echarts/features';
// 引入 Canvas 渲染器，注意引入 CanvasRenderer 或者 SVGRenderer 是必须的一步
import { CanvasRenderer } from 'echarts/renderers';
export default {
  created() {
    // 注册必须的组件
    echarts.use([
      TitleComponent,
      TooltipComponent,
      GridComponent,
      DatasetComponent,
      TransformComponent,
      BarChart,
      LabelLayout,
      UniversalTransition,
      CanvasRenderer
    ]);
  },
  mounted() {
    // 接下来的使用就跟之前一样，初始化图表，设置配置项
    var myChart = echarts.init(document.getElementById('main'));
    let option = {
      title: {
        text: 'ECharts 入门示例'
      },
      tooltip: {},
      xAxis: {
        data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
      },
      yAxis: {},
      series: [
        {
          name: '销量',
          type: 'bar',
          data: [5, 20, 36, 10, 10, 20]
        }
      ]
    }
    myChart.setOption(option);
  }
}
</script>

<style lang="less" scoped>
#main{
  width: 600px;
  height: 400px;
  margin: 40px;
}
</style> -->